
import * as echarts from '../../../../ec-canvas/echarts';
const systemInfo = wx.getSystemInfoSync();
const App = getApp();
Component({
  properties: {
  
  },
  data: {
    ec: {
      lazyLoad: true
    },
    info: {},
    moduleID: '',
  },
  ready() {
  },
  pageLifetimes: {
    show() {
    }
  },
  methods: {
    countEcharts(data){
      this.setData({
        info: data.result,
        moduleID: wx.getStorageSync('moduleList_new')[0]? wx.getStorageSync('moduleList_new')[0].moduleID : wx.getStorageSync('moduleList')[0].moduleID
      })
      const { moduleID } = this.data;
      if (moduleID === "health_comac"){
        let timer=null,wait=0;
        const fn=()=>{
          let _data = wx.getStorageSync('comacHealthcurve').result;
          if(_data){
            this.getLineOptionComac(_data)
            clearTimeout(timer);
          }else{
            wait++;
            if(wait<10){
              timer=setTimeout(fn, 1000);
            }else{
              clearTimeout(timer);
              console.error('等待超时！')
            }
          }
        }
        fn();
      } 
      else if (moduleID === "health_motor") {
        this.getLineOptionPgtj()
      } 
      else if (moduleID === "health_tobaccoxiamen") {
        this.getLineOption();
      } else if (moduleID === "health") {
        this.getLineOptionDecro();
      } 
    },

    // 配置折线图
    getLineOption() {
      let type = wx.getStorageSync('radioChange') || '1'
      const { info } = this.data;
      let seriesNameList;
      if(type === "1") {
        seriesNameList = ['今日趋势健康度','昨日趋势健康度']
      } else {
        seriesNameList = ['今日稳定健康度', '昨日稳定健康度']
      }
      let mychart = this.selectComponent("#mychart-dom-compare");
      mychart.init((canvas, width, height) => {
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption({
          grid: {
            left: '3%',
            right: '5%',
            top: '10%',
            bottom: '5%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            triggerOn: 'click',
            confine: true,
            extraCssText: "z-index:98",
            formatter: function (params) {
              var result = params[0].name;
              params.forEach(function (item,index) {
                result += "\n" + seriesNameList[item.seriesIndex] + ': ' + item.data;
              });
              return result;
            }
          },
          y: 'center',
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#9095A5',
                  fontSize: '13'
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#9095A5'
                }
              },
              data: info.timeLab,
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#9095A5',
                  fontSize: '14'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#9095A5'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#6B6E7B'
                }
              },
              max: 100
            }
          ],
          series: [
            {
              name: '',
              type: 'line',
              stack: '1',
              itemStyle: {
                normal: {
                  color: type === '1' ? '#b487ff' : '#7bb9ff',
                  lineStyle: {
                    color: type === '1' ? '#b487ff' : '#7bb9ff'
                  }
                }
              },
              data: type === '1' ? info.trendMoveHealthToday : info.stableMoveHealthToday
              // data: type === '1' ? info.trendMoveHealthYesterday : info.stableMoveHealthYesterday
            },
            {
              name: '',
              type: 'line',
              stack: '2',
              itemStyle: {
                normal: {
                  color: type === '1' ? '#8772b4' : '#6a8bb4',
                  lineStyle: {
                    color: type === '1' ? '#8772b4' : '#6a8bb4'
                  }
                }
              },
              data: type === '1' ? info.trendMoveHealthYesterday : info.stableMoveHealthYesterday
              // data: type === '1' ? info.trendMoveHealthToday : info.stableMoveHealthToday
            },
          ]
        })
        Chart.on('finished',() => {
          this.triggerEvent('myEvent')
        })
        return Chart
      })
    }, 
    // 配置折线图
    getLineOptionDecro() {
      const { info } = this.data;
      let mychart = this.selectComponent("#mychart-dom-compare");
      mychart.init((canvas, width, height) => {
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption({
          grid: {
            left: '5%',
            right: '5%',
            top: '5%',
            bottom: '5%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            triggerOn: 'click',
            confine: true,
            extraCssText: "z-index:98",
            formatter: function (params) {
              var result = params[0].name;
              params.forEach(function (item, index) {
                result += "\n" + item.seriesName + ': ' + item.data;
              });
              return result;
            }
          },
          y: 'center',
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#9095A5',
                  fontSize: '13'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#9095A5'
                }
              },
              data: info.timeLab,
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#9095A5',
                  fontSize: '14'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#9095A5'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#6B6E7B'
                }
              },
              max: 100
            }
          ],
          series: [
            {
              name: '今日健康度',
              type: 'line',
              stack: '1',
              itemStyle: {
                normal: {
                  color: '#5cfff0',
                  lineStyle: {
                    color: '#5cfff0'
                  }
                }
              },
              data: info.healthToday
            },
            {
              name: '昨日健康度',
              type: 'line',
              stack: '2',
              itemStyle: {
                normal: {
                  color: '#5baeac',
                  lineStyle: {
                    color: '#5baeac'
                  }
                }
              },
              data: info.healthYesterday
            },
          ]
        })
        return Chart
      })
    },
    // 配置折线图
    getLineOptionComac (data){
      let mychart = this.selectComponent("#mychart-dom-compare");
      mychart.init((canvas, width, height) => {
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption({
          legend: {
            data: [
              {
                name: '异常值曲线',
                textStyle: {
                  color: '#ff5c5c',
                  fontSize: 14
                }
              }
            ],
            top:'5%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '20%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            triggerOn: 'click',
            confine: true,
            extraCssText: "z-index:98",
            formatter: function (params) {
              var result = params[0].name;
              params.forEach(function (item, index) {
                result += "\n" + item.seriesName + ': ' + item.data;
              });
              return result;
            }
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#8a8f9f',
                  fontSize: '12'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#8a8f9f',
                }
              },
              data: data.timeLab,
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#8a8f9f',
                  fontSize: '13'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#8a8f9f'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#6B6E7B'
                }
              },
              max: 100
            }
          ],
          series: [
            {
              name: '异常值曲线',
              type: 'line',
              stack: '异常值曲线',
              // areaStyle: { show: false },
              itemStyle: {
                normal: {
                  color: '#ff5c5c',
                  lineStyle: {
                    color: '#ff5c5c'
                  }
                }
              },
              data: data.stableHealth
            }
          ]
        })
        return Chart
      })  
    },
    // 配置折线图
    getLineOptionPgtj (){
      const { info } = this.data;
      let mychart = this.selectComponent("#mychart-dom-compare");
      mychart.init((canvas, width, height) => {
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption({
          grid: {
            left: '5%',
            right: '5%',
            top: '5%',
            bottom: '5%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            triggerOn: 'click',
            confine: true,
            extraCssText: "z-index:98",
            formatter: function (params) {
              var result = params[0].name;
              params.forEach(function (item, index) {
                result += "\n" + item.seriesName + ': ' + item.data;
              });
              return result;
            }
          },
          y: 'center',
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#9095A5',
                  fontSize: '13'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#9095A5'
                }
              },
              data: info.timeLab,
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#9095A5',
                  fontSize: '14'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#9095A5'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#6B6E7B'
                }
              },
              max: 100
            }
          ],
          series: [
            {
              name: '今日趋势评估',
              type: 'line',
              stack: '1',
              itemStyle: {
                normal: {
                  color: '#5cfff0',
                  lineStyle: {
                    color: '#5cfff0'
                  }
                }
              },
              data: info.healthToday
            },
            {
              name: '昨日趋势评估',
              type: 'line',
              stack: '2',
              itemStyle: {
                normal: {
                  color: '#5baeac',
                  lineStyle: {
                    color: '#5baeac'
                  }
                }
              },
              data: info.healthYesterday
            },
          ]
        })
        return Chart
      })
    }
  }
})